<template>
  <div class="risk">
    <div class="add" @click="add" v-if="this.active === 0">新增</div>
    <eagle-tab-page-list
      url="/PlanEmergencyResourcePosition/GetPageData"
      :params="params"
      :filterParams="filterParams"
      :filterTab="filterTab"
      :activeFilter="activeFilter"
      @initActive="_initActive"
      @initList="_initList"
      ref="eagleTabPageList"
    >
      <div v-if="this.active === 0">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <eagle-tag
            v-if="item.ExpireDays > 0 || item.ExpireDays == null"
            class="info_tag"
            type="danger"
            >超期未检查
          </eagle-tag>
          <eagle-tag v-if="item.ExpireDays <= 0" class="info_tag" type="normal"
            >已按期检查
          </eagle-tag>
          <div>
            <eagle-row>
              <eagle-col span="24"
                ><h3>{{ item.Name }}</h3>
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_org.png"
                  alt=""
                />部门：{{ item.OrgFullName }}</eagle-col
              >
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />点检周期：{{ item.CheckFrequencyName }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />点检负责人：{{ item.CheckResponsibleChnName }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />最近点检日期：{{ getDate(item.LastCheckDate) || "暂无" }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />点检情况：{{ item.CheckCondition }}
              </eagle-col>
            </eagle-row>
            <eagle-divider />
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="check(item)"
              >点检
            </eagle-button>
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="edit(item)"
              >编辑
            </eagle-button>
            <eagle-button
              class="ml-10 mt-10"
              style="float: right;height:30px;"
              size="small"
              type="default"
              @click.stop="del(item)"
              >删除
            </eagle-button>
          </div>
        </eagle-cell>
      </div>
      <div v-if="this.active === 1">
        <eagle-cell class="card" v-for="(item, index) in list" :key="index">
          <eagle-tag
            v-if="item.CorrectiveStatus === 100"
            class="info_tag"
            type="normal"
            >已整改
          </eagle-tag>
          <eagle-tag
            v-if="item.CorrectiveStatus === 10"
            class="info_tag"
            type="danger"
            >未整改
          </eagle-tag>
          <div>
            <div @click="goToDetail(item)">
              <eagle-row>
                <eagle-col span="24">
                  <h3>{{ item.Position }}</h3>
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_org.png"
                    alt=""
                  />部门：{{ item.OrgFullName }}</eagle-col
                >
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                    alt=""
                  />物资名称：{{ item.ResourceName }}</eagle-col
                >
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                    alt=""
                  />问题描述：{{ item.CheckDesc }}</eagle-col
                >
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                    alt=""
                  />发现人：{{ item.CreateChnName }}</eagle-col
                >
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                    alt=""
                  />发现日期：{{ getDateTime(item.CreateDate) }}</eagle-col
                >
              </eagle-row>
            </div>
          </div>
        </eagle-cell>
      </div>
    </eagle-tab-page-list>
  </div>
</template>

<script>
import { getDateTime, getDate } from "@/utils/getDate.js";
export default {
  data() {
    return {
      active: 0,
      list: [],
      params: [
        {
          title: "应急物资管理",
          dataType: "List",
        },
        {
          title: "应急物资问题清单",
          dataType: "ListRecords",
        },
      ],
      showTab: false,
      filterTab: false,
      filterParams: [
        {
          name: "CorrectiveStatus",
          title: "整改状态",
          originTitle: "整改状态",
          dataType: "int",
          data: [
            { text: "不限", value: "" },
            { text: "未整改", value: "10" },
            { text: "已整改", value: "100" },
          ],
        },
      ],
      activeFilter: [
        {
          active: 0,
          filter: false,
        },
      ],
    };
  },
  methods: {
    _initActive(active) {
      if (active === 1) {
        this.filterTab = true;
      }
      if (active === 0) {
        this.filterTab = false;
      }
      this.active = active;
    },
    _initList(list) {
      let dataList = list;
      dataList.forEach((element) => {
        element.CheckCondition =
          "存在" + element.NCount + "个问题\n已整改" + element.YCount + "个";
      });
      this.list = dataList;
    },
    getDateTime(data) {
      return getDateTime(data);
    },
    getDate(data) {
      return getDate(data);
    },
    add() {
      this.$router.push({
        path: "/PlanEmergencyResourcePositionAdd",
        query: { id: 0 },
      });
    },
    edit(item) {
      this.$router.push({
        path: "/PlanEmergencyResourcePositionEdit",
        query: { id: item.ID },
      });
    },
    //点检
    check(item) {
      this.$router.push({
        path: "/PlanEmergencyResourceCheck",
        query: {
          positionCode: item.PositionCode,
          companyCode: this.CompanyCode,
        },
      });
    },
    //删除
    del(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除该存储位置吗？",
        })
        .then(() => {
          _this.$axios
      	  .get("/PlanEmergencyResourcePosition/Delete",{params:{ id: item.ID }})
          .then((res) => {
            _this.$toast.success("删除成功！");
            _this.$refs.eagleTabPageList.getList();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    goToDetail(item) {
      this.$router.push({
        path: "/PlanEmergencyResourceCheckDetail",
        query: { positionCode: item.PositionCode, code: item.Code },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.warn_item {
  margin: 10px;
  border-radius: 5px;
  position: relative;
}
.dep_sort {
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
</style>
